import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Form, Input, Button, NavBar, Popup, Toast, CapsuleTabs, Checkbox } from 'antd-mobile'
import styles from './index.module.css'
import { delPenple, addPenple,enidPenple } from '../../store/prarn/index'
import { SubmitBar } from 'react-vant';
import { useNavigate } from 'react-router-dom'
import axios from '../../api/index'
function index() {
  const nav=useNavigate()
  const [form] = Form.useForm()
  const dispatch = useDispatch()
  const [kkk, setKkk] = useState(1) 
  const [visible, setVisible] = useState(false)
  const penple = useSelector(state => state.penple.penple)
  console.log(penple)
  const [visible1, setVisible1] = useState(false)
  const del = (v) => {//删除乘车人
    if (confirm('您确定要删除吗')) {
      dispatch(delPenple(v.code))
      Toast.show({
        icon: 'success',
        content: '删除成功',
      })
    }
  }
  const onFinish = (val) => {///添加乘车人
    console.log(val)
    dispatch(addPenple(val))
    setVisible1(false)
    form.setFieldValue('name', [])
    form.setFieldValue('tel', [])
    form.setFieldValue('code', [])
  }
  const dj = () => {
    setKkk((pre) => pre + 1)  
    if (kkk === 0) {
      setVisible(false)
    } else if (kkk !== 0) {
      setVisible(true)
    }
  }
  const onSubmit=()=>{
    nav('/pay')
  }
  const sm=()=>{
    const input=document.createElement('input')
    input.type='file'
    input.onchange=function(e){
      const file=e.target.files[0]
      const reader=new FileReader()
      reader.readAsText(file)
      reader.onload=function(){
        const data=JSON.parse(reader.result)
         console.log(data)
      }
    }
  }
  const enidP=(v)=>{ //修改乘车人
    setVisible1(true)
     form.setFieldValue('name', v.name)
    form.setFieldValue('tel', v.tel)
    form.setFieldValue('code',v.code) 
    dispatch(enidPenple(
      { 
        name:v.name,
        tel:v.tel,
        code:v.code
      }
    ))
  }
  return (
    <div>
      <NavBar>乘车人页面</NavBar>
      <Button onClick={() => setVisible1(true)}>添加乘车人</Button>
        {/* 渲染乘车人信息 */}
      <div>
        {
          penple.map((v, i) => (
            <div key={i} className={styles.list}>
              <Checkbox  onChange={() => dj()} />
              <span>姓名：{v.name}</span>
              <span>手机号：{v.tel}</span><br />
              <span>身份证：{v.code}</span>
              <Button color='danger' size='mini' onClick={() => del(v)}>删除</Button>
              <Button color='warning' size='mini' onClick={() =>enidP(v) }>修改乘车人</Button>
            </div>
          ))
        }
      </div>
      {/* 乘车人为空选座也为空 */}
      {
        penple.length===0?'':<><div >
        <h4>在线选座</h4>
        <CapsuleTabs>
          <CapsuleTabs.Tab title='A' key='fruits' />
          <CapsuleTabs.Tab title='B' key='vegetables' />
          <CapsuleTabs.Tab title='C' key='animals' />
          <CapsuleTabs.Tab title='D' key='vegetables1' />
          <CapsuleTabs.Tab title='E' key='animals1' />
        </CapsuleTabs>
      </div>
      <div>
        <h4>选择车厢</h4>
        <CapsuleTabs>
          <CapsuleTabs.Tab title='02' key='fruits' />
          <CapsuleTabs.Tab title='03' key='vegetables' />
          <CapsuleTabs.Tab title='04' key='animals' />
          <CapsuleTabs.Tab title='05' key='vegetables1' />
          <CapsuleTabs.Tab title='06' key='animals11' /> 
          <CapsuleTabs.Tab title='07' key='fruits1' />
          <CapsuleTabs.Tab title='08' key='vegetables1' />
        </CapsuleTabs>
      </div></>
      }
      {/* 跳转支付页面 */}
      <div className={styles.footer}>
        <SubmitBar price='3050' onSubmit={onSubmit} buttonText="提交订单" />
      </div>
      {/* 弹窗添加乘车人 */}
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false)
        }}
        onClose={() => {
          setVisible1(false)
        }}
      >
        <Button onClick={()=>sm()}>扫描上传</Button>
        <Form
          form={form}
          onFinish={onFinish}
          layout='horizontal'
          footer={
            <Button block type='submit' color='primary' size='large'>
              提交
            </Button>
          }
        >
          <Form.Header>乘车人</Form.Header>
          <Form.Item>
            乘客类型:<CapsuleTabs>
              <CapsuleTabs.Tab title='成人' key='fruits' />
              <CapsuleTabs.Tab title='儿童' key='vegetables' />
              <CapsuleTabs.Tab title='学生' key='animals' />
            </CapsuleTabs>
          </Form.Item>
          <Form.Item
            name='name'
            label='姓名'
            rules={[{ required: true, message: '姓名不能为空' }]}
          >
            <Input placeholder='请输入姓名' />
          </Form.Item>
          <Form.Item
            name='tel'
            label='手机号'
            rules={[{ required: true, message: '手机号不能为空' },{
              pattern: /^1[3456789]\d{9}$/,
              message: '手机号格式不正确'
            }]}
          >
            <Input placeholder='请输入手机号' />
          </Form.Item>
          <Form.Item
            name='code'
            label='身份证'
            rules={[{ required: true, message: '身份证不能为空' },{
              pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
              message: '身份证格式不正确'
            }]}
          >
            <Input placeholder='请输入身份证' />
          </Form.Item>
        </Form>
      </Popup>
    </div>
  )
}

export default index